<template>
  <div class="shopping-business">
    <div class="shopping-item" ref="wrapper">
      <div>
        <div class="business-info">
          <p>配送信息</p>
          <p>由商家配送提供配送，约32分钟送达，距离1.4km</p>
          <p>配送费￥4</p>
        </div>
        <div class="body-line"></div>
        <div class="business-service">
          <p>配送信息</p>
          <div class="business-service__item">
            <div class="service__bao">保</div>
            <span>该商品已购买食品安全责任险，食品安全有保障</span>
          </div>
          <div class="business-service__item">
            <div class="service__bao">票</div>
            <span>该商家支持开发票，请在下单时填写好发票抬头</span>
          </div>
        </div>
        <div class="body-line"></div>
        <div class="business-real">
          <p>商家实景</p>
          <div class="real__img">
            <img src="../assets/logo.png" alt="">
            <img src="../assets/logo.png" alt="">
            <img src="../assets/logo.png" alt="">
            <img src="../assets/logo.png" alt="">
          </div>
        </div>
        <div class="body-line"></div>
        <div class="business-information">
          <div class="information__item">
            <p>商家信息</p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;披萨张专业的披萨外送店，外送产品全程保温，选用24小时以上的低温发酵面团，厨房通透、明亮、清洁，让您看得见所有产品制作的全过程，给您一个看得见的安心厨房，带您畅享手拍、无油的健康美味。
            </p>
          </div>
          <div class="information-category">
            <p>品类</p>
            <p>披萨</p>
          </div>
          <div class="information-category">
            <p>商家电话</p>
            <p>联系商家</p>
          </div>
          <div class="information-category">
            <p>地址</p>
            <p>武汉东湖新技术开发区花山花城大道2号碧桂园生态城8栋08号商铺</p>
          </div>
          <div class="information-category">
            <p>营业时间</p>
            <p>09:30-21:00</p>
          </div>
        </div>
        <div class="body-line"></div>
        <div class="business-qual">
          <p>营业资质</p>
        </div>
        <div class="body-line"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'ShoppingBusiness',
  data () {
    return {
      imgShopUrl: 'https://elm.cangdu.org/img/'
    }
  },
  created () {
  },
  methods: {
  },
  mounted () {
    this.scroller = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true,
      // 下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: 0
      },
      // 上拉加载
      pullUpLoad: {
        threshold: 50
      }
    })
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
    list-style: none;
  }
  .shopping-business{
    width: 100%;
    height: 1625px;
    background-color: #fff;
    .shopping-item{
      width: 100%;
      height: 1000px;
      overflow: hidden;
      .business-info{
        width: 100%;
        height: 225px;
        p{
          width: 92%;
          margin: 0px auto;
        }
        p:nth-child(1){
          font-size: 32px;
          margin-top: 37px;
        }
        p:nth-child(2){
          font-size: 25px;
          color: #666;
          margin-top: 38px;
        }
        p:nth-child(3){
          margin-top: 18px;
          font-size: 28px;
          color: #666;
        }
      }
      .body-line{
        width: 100%;
        height: 20px;
        background-color: #f5f5f5;
      }
      .business-service{
        width: 100%;
        height: 252px;
        p{
          width: 92%;
          margin: 38px auto;
          font-size: 33px;
        }
        .business-service__item{
          width: 92%;
          height: 35px;
          margin: 0px auto 25px;
          .service__bao{
            width: 45px;
            height: 35px;
            color: #999;
            font-size: 23px;
            display: inline-block;
            border: 1px solid #999;
            border-radius: 4px;
            text-align: center;
            line-height: 35px;
          }
          span{
            margin-left: 16px;
            font-size: 25px;
            color: #666;
          }
        }
      }
      .business-real{
        width: 100%;
        height: 276px;
        p{
          width: 92%;
          margin: 37px auto 0px;
          font-size: 32px;
        }
        .real__img{
          width: 92%;
          height: 155px;
          margin: 0px auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          img{
            width: 22%;
            height: 155px;
          }
        }
      }
      .business-information{
        width: 100%;
        .information__item{
          width: 100%;
          height: 260px;
          p:nth-child(1){
            width: 92%;
            margin: 38px auto;
            font-size: 32px;
          }
          p:nth-child(2){
            width: 92%;
            color: #666;
            margin: 0px auto 30px;
            font-size: 26px;
          }
        }
        .information-category{
          width: 92%;
          margin: 0px auto;
          padding: 34px 0px;
          border-top: 1px solid #ddd;
          display: flex;
          align-items: center;
          justify-content: space-between;
          p:nth-child(1){
            width: 25%;
            font-size: 27px;
            color: #333;
          }
          p:nth-child(2){
            width: 70%;
            text-align: right;
            font-size: 26px;
            color: #666;
          }
        }
      }
      .business-qual{
        width: 100%;
        height: 102px;
        display: flex;
        align-items: center;
        p{
          width: 92%;
          margin: 0px auto;
          font-size: 30px;
        }
      }
    }
  }
</style>
